<template>
  <div>
    <el-row :gutter="12">
      <!-- <el-col :span="8">
        <el-card>test1</el-card>
      </el-col> -->
      <template v-for="(item, index) in studentStatusList" :key="index">
        <el-col :span="8">
          <el-card shadow="hover">
            <div class="card-container">
              <span class="left">{{ item.title }}</span>
              <el-tag :type="item.type">{{ item.msg }}</el-tag>
            </div>
            <hr />
            <div class="content-container">
              <span>人数：</span>
              <count-up :startVal="0" :end-val="item.count" :duration="1" />
            </div>
          </el-card>
        </el-col>
      </template>
    </el-row>
    <!-- <el-row class="pie-container" :gutter="12">
    <el-col :span="12"><MyBarChart /></el-col>
      <el-col :span="12"> <MyPieChart /> </el-col>
    </el-row>
    <div class="line-container"><MyLineChart /></div> -->
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted } from 'vue'
import CountUp from 'vue-countup-v3'
import { getStatus } from '@/api/modules/student'
// import MyPieChart from './chart/PieChart.vue'
// import MyBarChart from './chart/BarChart.vue'
// import MyLineChart from './chart/LineChart.vue'

// ------------------------------ 学生状态数据展现 ------------------------------
// 标签类型枚举
enum tagType {
  success = 'success',
  warning = 'warning',
  danger = 'danger',
}
// 学生状态列表
const studentStatusList = reactive([
  {
    title: '正常',
    msg: 'msg1',
    count: 0,
    type: tagType.success,
  },
  {
    title: '风险',
    msg: 'msg2',
    count: 0,
    type: tagType.warning,
  },
  {
    title: '感染',
    msg: 'msg3',
    count: 0,
    type: tagType.danger,
  },
])
// 初始化
onMounted(() => {
  getStatus()
    .then((response) => {
      studentStatusList[0].count = response.data.negative
      studentStatusList[1].count = response.data.warning
      studentStatusList[2].count = response.data.positive
    })
    .catch((error) => {
      console.log(error)
    })
})
</script>

<style scoped lang="scss">
.card-container {
  display: flex;
  justify-content: space-between;
  padding: 0 0 10px 0;
}
.content-container {
  display: flex;
  justify-content: space-between;
  padding: 10px 0 0 0;
}
.pie-container,
.line-container {
  margin-top: 20px;
}
</style>
